<template>
  <Transition>
    <div class="confirm-bar" v-if="visible">
      <div class="content">
        <slot name="content">已选&nbsp;{{ total }}&nbsp;项</slot>
      </div>
      <div class="handle">
        <a-space>
          <slot name="handle">
            <a-button type="link" @click="onCancel">取消</a-button>
            <a-button type="link" @click="onConfirm">确定</a-button>
          </slot>
        </a-space>
      </div>
    </div>
  </Transition>
</template>
<script setup>
import { useVModel } from '@vueuse/core'
/**
 * 外部参数
 */
let props = defineProps({
  visible: { type: Boolean, default: () => false },
  total: { type: Number, default: () => 0 },
})
/**
 * 事件定义
 */
let emit = defineEmits(['update:visible', 'confirm', 'cancel'])
/**
 * 双向绑定
 */
let visible = useVModel(props, 'visible', emit)
/**
 * 事件
 */
function onConfirm() {
  visible.value = false
  emit('confirm')
}
function onCancel() {
  visible.value = false
  emit('cancel')
}
</script>
<style lang="less" scoped>
.confirm-bar {
  background-color: #dbefff;
  border: solid 1px #74a1c7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px 7px 24px;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.2s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
